﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="./icons/font-icons.min.css">
    <link rel="stylesheet" type="text/css" href="./icons/icons.css">
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="./layui/css/customer.css">
    <script type="text/javascript" src="./js/sortjs/Sortable.min.js"></script>
    <!--- 引入代码. -->
    <script src="../Scripts/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./layui/layui.js"></script>
    <script src="../Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../Scripts/config.js" type="text/javascript"></script>
    <script src="../Comm/Gener.js" type="text/javascript"></script>
    <script type="text/javascript" src="./js/vue/vue.js"></script>
    <!--    <script type="text/javascript" src="Flows.js"></script>-->
    <style>
        .flow {
            width: 100%;
        }

            .flow .row {
                display: flex;
                justify-content: flex-start;
                flex: 0.2;
                height: 40px;
                line-height: 40px;
                background-color: #FAFAFA;
            }
                /*.flow .row .item {*/
                /*    box-sizing: border-box;*/
                /*    flex-shrink: 0;*/
                /*    text-align: center;*/
                /*    width: 20%;*/
                /*    border: 1px solid #eee;*/
                /*    font-weight: 600;*/
                /*}*/

                .flow .row .item {
                    box-sizing: border-box;
                    flex-shrink: 0;
                    text-align: center;
                    border-right: 1px solid #eee;
                    border-bottom: 1px solid #eee;
                }

        .item-name {
            width: 30%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;
            padding-left: 30px;
        }

        .item-other {
            width: 10%;
        }

        .item-Date {
            width: 10%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;
        }

        .item-index {
            background-color: #FAFAFA;
            padding-right: 40px;
            color: #999999
        }

        .flow .row .folder-item {
            box-sizing: border-box;
            width: 76%;
            padding-left: 20px;
            cursor: pointer;
        }

        .wrapper .row {
            background-color: #fff;
        }

        #s-main {
            transition: all ease .4s;
            margin-top: 40px;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }

        [v-cloak] {
            display: none !important;
        }
    </style>
</head>

<body>
    <div class="flow" id="flow" v-cloak>
        <div class="row fixed">
            <div class="item item-other" @click="expandAll = !expandAll">
                <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">{{expandAll ? '折叠所有' : '展开所有'}}</button>
            </div>
            <!--<div class="item item-name">流程名称</div>-->

            <div class="item item-name">
                <div class="item item-content">
                    <a href="http://ccflow.org/Ke.html" target="_blank" class="icon-camrecorder"><font color="blue">&nbsp;视频教程</font></a> 
                    &nbsp;
                    <a href="FlowTree.htm" class="icon-heart"><font color="blue">&nbsp;树结构</font></a>

                </div>
            </div>

            <div class="item item-other">实例</div>
            <div class="item item-other">域</div>
            <div class="item item-other">运行中</div>
            <div class="item item-other">退回</div>
            <div class="item item-Date">创建日期</div>
            <div class="item item-other">操作</div>
        </div>
        <div ref="sort-main" id="s-main">

            <div class="wrapper" v-for="(item,index) in flowNodes" :key="index" :data-id="item.No" :data-pid="item.ParentNo">
                <div class="row" @click="item.open = !item.open">
                    <div class="item item-other" style="text-align: center">
                        <i v-if="item.children.length > 0" class="layui-icon" :class="item.open ? 'layui-icon-up':'layui-icon-right'"></i>
                        <i v-else class="layui-icon layui-icon-subtraction"></i>
                    </div>
                    <div class="item item-name item-top-dp" style="text-align: left; background-color:azure;" :data-no="item.No" :data-name="item.Name" :data-idx="index">
                        <i class="icon-folder" style="margin-right: 8px"></i>
                        <!--<span @click.stop="EditSort(item.No,item.Name)">{{item.Name}}</span>-->
                        <span :id="item.No">{{item.Name}}</span>
                    </div>


                    <div class="item item-other" style="background-color:azure;">
                        <button @click.stop="NewFlow(item.No)" :data-no="item.No" :data-name="item.Name" :data-idx="index" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                            新建流程
                        </button>
                    </div>
                    <div class="item item-other" style="text-align: center; background-color:azure;">{{item.Domain}}</div>
                    <div class="item item-other" style="text-align: left; background-color:azure;"></div>
                    <div class="item item-other" style="text-align: left; background-color:azure;"></div>
                    <div class="item item-Date" style="text-align: left; background-color:azure;"></div>
                    <div class="item item-other ">
                        <button @click.stop :data-no="item.No" :data-name="item.Name" :data-idx="index" class="layui-btn layui-btn-primary layui-border-black layui-btn-sm t-btn">
                            <i class="layui-icon layui-icon-down layui-font-12"></i> 目录
                        </button>
                    </div>
                </div>
                <div v-show="item.open" :data-id="item.No" ref="child-row">
                    <div class="row" v-for="(flow,idx) in item.children" :key="idx" :data-pid="item.No" :data-id="flow.No">
                        <div class="item item-other item-index" style="text-align: right;">{{idx + 1}}</div>

                        <div class="item item-name item-name-dp" @click.stop="Designer(flow.No,flow.Name)" style="text-align: left" :data-no="flow.No" :data-name="flow.Name" :data-pidx="index" :data-idx="idx">
                            <!-- 这里是子菜单的icon -->
                            <!-- 这里是子菜单的icon -->
                            <!-- 这里是子菜单的icon -->
                            <i class="icon-heart" style="margin-right: 8px"></i>
                            <span>{{flow.No}}.{{flow.Name}}</span>
                        </div>

                        <div class="item item-other">{{parseInt(flow.WFSta2) + parseInt(flow.WFSta3) + parseInt(flow.WFSta5)}}</div>
                        <div class="item item-other">{{flow.Domain}}</div>
                        <div class="item item-other">{{flow.WFSta2}}</div>
                        <div class="item item-other">{{flow.WFSta5}}</div>
                        <div class="item item-Date">{{flow.Ver}}</div>
                        <div class="item item-other">
                            <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs c-btn" :data-name="flow.Name" :data-no="flow.No" :data-pidx="index" :data-idx="idx">
                                <i class="layui-icon layui-icon-down layui-font-12"></i>流程
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="Flows.js"></script>

    <script type="text/javascript">

    </script>

</body>

</html>